<template>
  <el-dialog
    v-model="dialogStore.showVoteDialog"
    :show-close="false"
    :width="442"
    :close-on-click-modal="true"
    class="nexbie-base-dialog"
    :z-index="9999">
    <template #header>
      <div class="my-header">
        <SvgIcon name="ai-close" size="24" class="close-icon" @click="close" />
      </div>
    </template>

    <div class="dialog-content">
      <img src="@/assets/contest/vote-success.png" class="vote-success-icon" />

      <h2>Vote Successfully!</h2>
      <p>Your support brings this designer one step closer to victory!</p>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { useDialogStore } from '@/store/dialog';

  const dialogStore = useDialogStore();
  const close = () => {
    dialogStore.toggleVoteDialog(false);
  };
</script>

<style lang="scss">
  .nexbie-base-dialog {
    padding: 24px;
    border-radius: 8px;
    .el-dialog__header {
      padding-bottom: 0px;
    }
  }
</style>

<style lang="scss" scoped>
  .my-header {
    display: flex;
    justify-content: flex-end;
    .close-icon {
      cursor: pointer;
      position: absolute;
      right: -30px;
      top: 0px;
    }
  }

  .dialog-content {
    .vote-success-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 8px;
    }
    h2 {
      color: #222;
      text-align: center;
      font-size: 22px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin-bottom: 8px;
    }
    p {
      color: #7a7a7a;
      text-align: center;
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%; /* 24px */
      margin-bottom: 8px;
    }
  }
</style>
